<template>
    <div class="seaarch_header">
        <img v-if="getPageTitle == '需求大厅' || getPageTitle == '找服务商' || getPageTitle == '优质服务'" class="seaarch_header_bj"
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/seaarchHeader_bj2.png" alt="">
        <img v-else class="seaarch_header_bj"
            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/service/seaarchHeader_bj.png" alt="">
        <div v-if="getPageTitle == '需求大厅' || getPageTitle == '找服务商' || getPageTitle == '优质服务'" class="header_title2">
            {{ getPageTitle }}
        </div>
        <div v-else class="header_title">
            {{ getPageTitle }}
        </div>
        <div class="search">
            <div class="search-1">
                <el-input :placeholder="getInputText" v-model="keyword" class="search-1-input">
                </el-input>
                <el-button class="search-1-right" type="primary" round @click="goSearch()">搜索</el-button>
            </div>
            <el-button class="fbxq-button" @click="goPostDemand()">发布需求</el-button>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: 'seaarchHeader',
    data() {
        return {
            keyword: '',
        }
    },
    computed: {
        getPageTitle: function () {
            switch (this.$route.name) {
                case 'service-demandlist':
                    return '需求大厅';
                case 'service-servicelist':
                    return '找服务商';
                case 'service-servicesearch':
                    return '优质服务';
                default:
                    return '申请服务商'
            }
        },
        getInputText: function () {
            switch (this.$route.name) {
                case 'service-servicelist':
                    return '全国服务商';
                case 'service-servicesearch':
                    return '优质服务';
            }
            return '代理记账';

        },
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
    },
    mounted() {
        if (this.$route.query.keyword)
            this.keyword = this.$route.query.keyword;
    },
    methods: {
        goSearch(keyword, cate) {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            if (this.$route.name == 'service-demandlist') {
                this.$router.push({
                    path: "/service/demandlist",
                    query: {
                        keyword: this.keyword,
                    },
                });

            } else if (this.$route.name == 'service-servicelist') {
                this.$router.push({
                    path: "/service/servicelist",
                    query: {
                        keyword: this.keyword,
                    },
                });

            } else if (this.$route.name == 'service-servicesearch') {
                this.$router.push({
                    path: "/service/servicesearch",
                    query: {
                        keyword: this.keyword,
                    },
                });
            } else {
                this.$router.push({
                    path: "/service/servicesearch",
                    query: {
                        keyword: this.keyword,
                    },
                });
            }

        },


        goPostDemand() {
            if (!this.userInfo) {
                this.$confirm("该功能需要登录后使用", "提示", {
                    confirmButtonText: "去登录",
                    cancelButtonText: "再看看",
                })
                    .then(() => {
                        this.$router.push({
                            path: "/login",
                            query: {
                                url:
                                    window.location.pathname +
                                    window.location.search,
                            },
                        });
                    })
                    .catch(() => { });
                return;
            }
            this.$router.push({
                path: "/service/postdemand",
            });
        },


    }
}
</script>

<style lang="scss" scoped>
.seaarch_header {
    position: relative;
    width: 100%;

    .seaarch_header_bj {
        top: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        position: absolute;
        z-index: 1;
    }

    * {
        position: relative;
        z-index: 10;
    }
}


.header_title {
    width: 245px;
    margin: 0 auto;
    font-size: 48px;
    font-weight: bold;
    color: transparent;
    font-style: oblique;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(315deg, #FB5850 0%, #FFBD33 100%);
    text-align: center;
    text-shadow: 0px 4px 2px rgba(5, 50, 94, 0.08);
    padding: 40px 0 32px;
}

.header_title2 {
    width: 245px;
    margin: 0 auto;
    font-size: 48px;
    font-weight: bold;
    color: #1B8DFF;
    font-style: oblique;
    text-align: center;
    text-shadow: 0px 4px 2px rgba(5, 50, 94, 0.08);
    padding: 40px 0 32px;
}

.search {
    display: flex;
    align-items: center;
    width: 1000px;
    margin: 0 auto;

    .search-1 {
        display: flex;
        align-items: center;
        background-color: #ffffff;
        width: 100%;
        height: 60px;
        border-radius: 60px;
        border: 2px solid #008EFF;
        overflow: hidden;
        margin-right: 20px;

        .search-1-input {
            font-size: 18px;
        }

        &::v-deep .el-input__inner {
            border-style: none;

        }

        .search-1-right {
            width: 137px;
            height: 52px;
            background: linear-gradient(45deg, #008EFF 0%, #40AAFF 100%);
            border-radius: 50px;
            position: relative;
            right: 3px;
            font-size: 20px;
            color: #FFFFFF;

            &:hover {
                opacity: 0.8;
            }

            &:active {
                opacity: 0.9;
            }
        }
    }

    .fbxq-button {
        width: 139px;
        height: 54px;
        background: rgba(0, 142, 255, 0.1);
        border-radius: 50px;
        border: 2px solid #008EFF;
        font-size: 20px;
        color: #008EFF;

        &:hover {
            opacity: 0.8;
        }

        &:active {
            opacity: 0.9;
        }
    }
}
</style>